Estoy usando mat-select para mostrar una lista de opciones. Entonces, cuando hace clic en el campo de entrada mat-select, muestra una lista de opciones usando div con la clase cdk-overlay-pane. Quiero personalizar la clase cdk-overlay-pane. Usando ::ng-deep hice esto como,
::ng-deep { .cdk-overlay-pane { transform: translateX(-40px) translateY(-13px) !important; } }Y también funciona, pero está afectando a otro panel de superposición de cdk.
¿Hay alguna forma de dar customClass a ese div con cdk-overlay-pane?
<div id="cdk-overlay-1" class="cdk-overlay-pane customClass" style="transform: translateX(-40px) translateY(-51px);">de modo que solo se personalizará este div y no afectará a otros divs.
Debe usar el token de inyección MAT_SELECT_CONFIG . Tiene una opción overlayPanelClass: string | string[] , que representa:
la clase o lista de clases que se aplicarán al panel de superposición del menú.
En breve, use el siguiente código a nivel de componente o de módulo:
providers: [ { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: 'customClass' } } ],Demostración: https://stackblitz.com/edit/angular-hxgonn
La opción overlayPanelClass está disponible en Angular Material v11.
MAT_SELECT_CONFIG está documentado aquí . MatSelectConfig está documentado aquí :